<template>
  <div>
    <div id="cluster-pie" :style="{width: '234px', height: '240px'}"></div>
  </div>
</template>

<script>
  export default {

    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        let myChart = this.$echarts.init(document.getElementById('cluster-pie'));


        var data = {
          value: 18,
          text: '打开率',
          color: '#7b9e02',
          title: ''
        }
        let value = data.value || 0
        var option = {
          backgroundColor: '#fff',
          title: {
            x: '2%',
            y: '2%',
            textStyle: {
              fontWeight: 400,
              fontSize: 16,
              color: '#687284'
            },
            text: data.title || ''
          },
          tooltip: {
            trigger: 'item',
            formatter: '{c}%'
          },
          series: [{
            type: 'pie',
            radius: ['85', '100'],
            hoverAnimation: false,
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [{
              value: value,
              name: data.text,
              itemStyle: {
                normal: {
                  color: data.color,
                }
              },
              label: {
                normal: {
                  textStyle: {
                    fontSize: 30,
                    fontWeight: 600,
                    color: data.color,
                  }
                }
              }
            },
              {
                value: 100 - value,
                name: '占位',
                tooltip: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    color: '#E0E3E9',
                  }
                },
                label: {
                  normal: {
                    formatter: value + '%',
                    textStyle: {

                      fontSize: 20,
                      color: data.color
                    }
                  },

                }
              }
            ]
          }]
        }


        myChart.setOption(option);
      }
    }
  }
</script>

<style scoped>

</style>
